<template>
	<view>
		<search></search>
		<!-- 分类 -->
		<view class="main_container">
			<!-- 左侧主分类 -->
			<view class="left_cate_container">
				<view v-for="(item, index) in category" :key="index" :class="index === curIndex ? 'active item': 'item'" @click="setCurIndex(index)" >{{item.cat_name}}</view>
			</view>
			<!-- 右侧二级分类 -->
			<view class="right_cate_container" v-if="category[curIndex]">
				<view v-for="(item, index) in category[curIndex].children" :key="index" class="floor">
					<view class="title">/ {{item.cat_name}} /</view>
					<view class="categories_container">
						<view class="category" v-for="(v, i) in item.children" :key="i" @click="jumpToProductList(v.cat_id)">
							<image mode="widthFix" :src="v.cat_icon"></image>
							<view class="name">{{v.cat_name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from '@/components/search/index.vue'
	export default {
		data() {
			return {
				category: [],
				curIndex: 0, // 当前点击的分类索引值
			}
		},
		onLoad() {
			this.getCategory();
		},
		methods: {
			// 请求分类数据
			async getCategory() {
				const [ error, res ] = await uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories'
				})
				this.category = res.data.message;
			},
			setCurIndex(index) {
				this.curIndex = index;
			},
			jumpToProductList(cat_id) {
				uni.navigateTo({
					url: '/pages/goods_list/index?cat_id=' + cat_id
				})
			}
		},
		components: {
			search
		}
	}
</script>

<style lang="less">
.main_container {
	// 100 vh 表示一屏的高度， 100vw 表示一屏宽度
	// 样式的运算 calc(100vh - 100rpx) 表示减去搜索栏高度
	height: calc(100vh - 100rpx);
	display: flex;
	.left_cate_container {
		-webkit-overflow-scrolling: touch;
		width: 182rpx;
		height: 100%;
		background-color: #F3F3F3;
		overflow: scroll;
		.item {
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #585858;
		}
		.item.active {
			position: relative;
			font-weight: 550;
			color: #EA4350;
		}
		.item.active::before{
			content: '';
			position: absolute;
			top: 20rpx;
			left: 0;
			width: 4rpx;
			height: 43rpx;
			background-color: #EA4350;
		}
	}
	.right_cate_container {
		-webkit-overflow-scrolling: touch;
		flex: 1;
		overflow: scroll;
		padding: 0 48rpx;
		.floor {
			margin: 18rpx 0;
			.title {
				font-size: 28rpx;
				color: #575757;
				text-align: center;
				font-weight: bold;
				margin-bottom: 30rpx;
			}
			.categories_container {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.category {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 30rpx;
					.name {
						font-size: 24rpx;
						color:#2E2E2E;
						font-weight: 500;
					}
					image {
						width:120rpx;
						height: 120rpx;
					}
				}
			}
		}
	}
}
</style>